<template>
  <!-- 自定义表单内容 -->
  <div v-if="fields && fields.length" class="extension-container">
    <dialog-video-player ref="videoPlayer" />
    <h4>其他信息</h4>
    <el-form ref="form" label-position="left" class="custom-form" label-width="100px">
      <div v-for="d in fields" :key="d.id" class="form-item">
        <el-form-item v-if="d.fieldType !== 'upload'" :label="d.fieldName">
          <!-- 文本框 -->
          <el-input v-if="d.fieldType === 'text'" v-model="results[d.id]" readonly />
          <!-- 选择框 -->
          <el-select v-if="d.fieldType === 'select'" v-model="results[d.id]" style="width: 100%" disabled placeholder="未选择数据">
            <el-option
              v-for="(item, c) in JSON.parse(d.options)"
              :key="c"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 数字框 -->
          <el-input v-if="d.fieldType === 'number'" v-model="results[d.id]" readonly />
          <!-- 单选框 -->
          <el-radio-group v-if="d.fieldType === 'radio'" v-model="results[d.id]">
            <el-radio v-for="(op, c) in JSON.parse(d.options)" :key="'radio' + c" readonly :label="op.value">{{ op.label }}</el-radio>
          </el-radio-group>
          <!-- 多选框 -->
          <el-checkbox-group v-if="d.fieldType === 'checkbox'" v-model="results[d.id]">
            <el-checkbox v-for="(op, c) in JSON.parse(d.options)" :key="'checkbox' + c" readonly :label="op.value">{{ op.label }}</el-checkbox>
          </el-checkbox-group>
          <!-- 日期框 -->
          <div v-if="d.fieldType === 'date'" class="block">c
            <el-date-picker
              v-model="results[d.id]"
              style="width: 100%"
              :type="d.dateType"
              disabled
              placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
        <el-row v-else class="check-row" type="flex" align="middle" style="padding: 10px 0">
          <span class="form-label">{{ d.fieldName }}</span>
          <el-col :span="22" style="display: flex; overflow-x: auto;">
            <span v-for="(attachment, index) in fileList[d.id]" :key="index" class="img-des">
              <template v-if="imageTypes.includes(attachment.type)">
                <el-image class="item-image" fit="contain" :src="getFileRequestUrl(attachment.fileId)" :preview-src-list="[getFileRequestUrl(attachment.fileId)]" />
              </template>
              <template v-if="videoTypes.includes(attachment.type)">
                <div class="video-wrapper" @click="playVideo(attachment)">
                  <i class="video-icon el-icon-video-camera" />
                </div>
              </template>
            </span>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import DialogVideoPlayer from './DialogVideoPlayer'
export default {
  name: 'ExtensionFormResult',
  components: {
    DialogVideoPlayer
  },
  props: {
    /* 表单字段列表 */
    fields: {
      type: Array,
      default: function() { return [] }
    },
    /* 表单结果列表 */
    results: {
      type: Object,
      default: function() { return {} }
    },
    /* 附件列表 */
    fileList: {
      type: Object,
      default: function() { return {} }
    }
  },
  data() {
    return {
      imageTypes: ['png', 'jpg', 'jpeg'],
      videoTypes: ['mp4']
    }
  },
  methods: {
    getImgUrls(fileList, id) {
      if (fileList[id]) {
        return fileList[id].map(item => process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + item)
      }
      return []
    },
    /**
     * 获取文件请求链接
     * @param fileId
     */
    getFileRequestUrl(fileId) {
      return process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + fileId
    },
    /**
     * 播放视频
     * @param video
     */
    playVideo(video) {
      const url = process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + video.fileId
      this.$refs.videoPlayer.play(url)
    }
  }
}
</script>

<style scoped lang="scss">
  .custom-form{
    margin-top: 10px;
    .el-form-item__label {
      color: #99a9bf !important;
    }
  }
  .check-row {
    min-height: 30px;
    span:nth-child(1) {
      white-space: nowrap;
    }
    .img-des {
      color: #909399;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #F2F6FC;
      margin: 10px;
      width: 100px;
      height: 100px;
    }
    .video-wrapper {
      cursor: pointer;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .video-icon {
        font-size: 46px;
      }
    }
    .item-image {
      width: 100%;
      height: 100%;
    }
    .unqualified {
      display: flex;
      span:nth-child(1) {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
    .qualified {
      display: flex;
      span:nth-child(1) {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
  .form-label{
    width: 100px;
    display: inline-block;
    margin-right: 12px;
  }
</style>

<style lang="scss">
  .extension-container{
    .is-disabled .el-input__inner{
      background-color: white !important;
      color: #606266 !important;
    }
    .el-input__inner{
      width: 400px !important;
    }
  }

</style>
